<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css" media="all">
  <title>生产看板</title>
</head>
<body>
  <div class="production-board">
    <!-- 标题 -->
    <div class="board-top">
      <div class="info">
        <div class="info-time"></div>
        <div class="info-line-y"></div>
        <div class="info-date"></div>
      </div>
      <div class="board-top-title">某生产ERP - 生产数据舱</div>
    </div>
    <!-- 中间 -->
    <div class="board-main">
      <div class="board-main-left">
        <div class="box">
          <div class="text">
            <div class="text-label">等待排产</div>
            <div class="text-count text-count-yellow">54</div>
          </div>
          <img class="icon" src="./img/waiting.png" alt="waiting.png">
        </div>
        <div class="box">
          <div class="text">
            <div class="text-label">生产中</div>
            <div class="text-count text-count-green">54</div>
          </div>
          <img class="icon" src="./img/producing.png" alt="waiting.png">
        </div>
        <div class="box">
          <div class="text">
            <div class="text-label">近7天完成</div>
            <div class="text-count text-count-cyan">54</div>
          </div>
          <img class="icon" src="./img/7days.png" alt="waiting.png">
        </div>
        <div class="box" style="margin-bottom: 0;">
          <div class="text">
            <div class="text-label">近30天完成</div>
            <div class="text-count text-count-cyan">54</div>
          </div>
          <img class="icon" src="./img/30days.png" alt="waiting.png">
        </div>
      </div>
      <div class="board-main-right">
        <table class="list" border="0" cellpadding="0" cellspacing="0">
          <thead>
            <tr class="list-tr-head text list-linear-y">
              <td width="7%">订单号</td>
              <td>终端地址</td>
              <td width="5%">加急</td>
              <td width="7%">开始日期</td>
              <td width="7%">预计完成</td>
              <td width="7%">进度</td>
              <td width="55%"> </td>
            </tr>
          </thead>
          <tbody>
            <tr class="list-tr text list-line-x">
              <td>2306-201</td>
              <td>鑫苑鑫都会10-2-2106</td>
              <td>加急</td>
              <td>6月01日</td>
              <td>6月28日</td>
              <td>83.33%</td>
              <td> </td>
            </tr>
            <tr class="list-tr text list-line-x">
              <td>2306-201</td>
              <td>鑫苑鑫都会10-2-2106</td>
              <td class="text-red">加急</td>
              <td>6月01日</td>
              <td>6月28日</td>
              <td>83.33%</td>
              <td class="step list-linear-x">
                <div class="step-area">
                  <div class="step-main">
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                  </div>
                  <div class="tag-area">
                    <div class="tag tag-green">正常</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr class="list-tr text list-line-x">
              <td>2306-201</td>
              <td>鑫苑鑫都会10-2-2106</td>
              <td>正常</td>
              <td>6月01日</td>
              <td>6月28日</td>
              <td>83.33%</td>
              <td class="step list-linear-x">
                <div class="step-area">
                  <div class="step-main">
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                    <div class="step-item">
                      <span class="step-item-white">06-04刘大师</span> 
                      <span class="step-item-yellow">开料</span>
                    </div>
                  </div>
                  <div class="tag-area">
                    <div class="tag tag-red">延期</div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 底部 -->
    <div class="board-footer">
      <div class="board-footer-left">
        <div class="title">近30日已完成订单滚动播放</div>
        <div class="content content-left">
          <table class="list" style="margin-top: 1.25rem;" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr class="list-tr list-title">
                <td>订单号</td>
                <td>终端地址</td>
                <td>生产完成时间</td>
                <td>实际生产周期</td>
                <td>状态</td>
              </tr>
            </thead>
          </table>
          <div id="scroll-area" class="scroll-area">
            <table class="list" style="margin-bottom: 1.25rem;" border="0" cellpadding="0" cellspacing="0">
              <thead style="display: none;">
                <tr class="list-tr list-title">
                  <td>订单号</td>
                  <td>终端地址</td>
                  <td>生产完成时间</td>
                  <td>实际生产周期</td>
                  <td>状态</td>
                </tr>
              </thead>
              <tbody id="scroll-tbody">
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td class="text-red">已完成,延期1天</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td class="text-red">已完成,延期1天</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td class="text-red">已完成,延期1天</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
                <tr class="list-tr text">
                  <td>2306-10</td>
                  <td>碧桂园悦江府6-2-304范夏佑</td>
                  <td>6月10日</td>
                  <td>17天</td>
                  <td>已完成</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="board-footer-right">
        <div class="title">订单数量汇总</div>
        <div class="content content-right">
          <div class="chart">
            <canvas id="total-canvas" width="490px" height="230px"></canvas>
            <!-- <canvas id="total-canvas" width="490px" height="280px"></canvas> -->
          </div>
          <div class="total">
            <div class="total-item">
              <div class="title-area">
                <span class="text">本周订单数量</span>
                <span class="text text-num-white">80</span>
              </div>
              <div class="main">
                <div class="total-icon"></div>
                <div class="text">
                  <span class="text-num-green">+87.36%</span>
                  <span class="text-label">环比增长</span>
                </div>
              </div>
            </div>
            <div class="total-item">
              <div class="title-area">
                <span class="text">本月订单数量</span>
                <span class="text text-num-white">240</span>
              </div>
              <div class="main">
                <div class="total-icon"></div>
                <div class="text">
                  <span class="text-num-red">-12.36%</span>
                  <span class="text-label">环比增长</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="board-footer-line"></div>
  </div>
  
  <script type="text/javascript" src="./js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="./js/board.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>